import styles from './index.module.less'
import logo from '../../assets/AAxh.png'
import { Button, Input, Form } from 'react-vant'
import RotatingAvatar from './rotate/RotatingAvatar'
import axios from '../../api'
import { useNavigate } from 'react-router-dom'
import toast from 'react-hot-toast'

export default function Register() {
    // 表单组件
    const [form] = Form.useForm()

    // 路由跳转实例
    const navigate = useNavigate()

    const onFinish = values => {
        // console.log(values)
        axios.post("/user/register", values).then(res => {
            console.log(res);
            // 打印注册成功的消息
            toast.success(res.msg)
            // 注册成功后，跳转到登录页面
            navigate('/login')
        })
    }

    return (
        <div className={styles.login}>
            <h1 className={styles.title}>记录每一天</h1>
            <div className={styles['login-wrapper']}>
                <div className={styles.avater}>
                    <RotatingAvatar
                        src={logo}
                        alt="Logo"
                        className={styles['avater-img']}
                    />
                </div>
                <Form
                    form={form}
                    onFinish={onFinish}
                    footer={
                        <div style={{ margin: '16px 16px 0' }}>
                            <Button round nativeType='submit' type='primary' block>
                                注册
                            </Button>
                        </div>
                    }
                >
                    <Form.Item
                        rules={[{ required: true, message: '请填写用户名' }]}
                        name='username'
                        label='用户名'
                        labelWidth={50}
                    >
                        <Input placeholder='请输入用户名' />
                    </Form.Item>
                    <Form.Item
                        rules={[{ required: true, message: '请填写密码' }]}
                        name='password'
                        label='密码'
                        labelWidth={50}
                    >
                        <Input placeholder='请输入密码' />
                    </Form.Item>
                    {/* <Form.Item
                        rules={[{ required: true, message: '请填写确认密码' }]}
                        name='confirmPassword'
                        label='确认密码'
                        labelWidth={50}
                    >
                        <Input placeholder='请输入确认密码' />
                    </Form.Item> */}
                    <Form.Item
                        rules={[{ required: true, message: '请填写昵称' }]}
                        name='nickname'
                        label='昵称'
                        labelWidth={50}
                    >
                        <Input placeholder='请输入昵称' />
                    </Form.Item>
                </Form>
            </div>
            <p className={styles['login-tips']}>
                已有账号？<span onClick={() => navigate('/login')} style={{ color: '#1c08b6' }}>点击登录</span>
            </p>
        </div>
    )
}
